<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">

    <link rel="stylesheet" href="/js/layui/css/layui.css">

    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div>
        <div th:insert="common/mainHeader :: main_header"></div>
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li>
                        <a th:href="@{/main}">
                            用户列表
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/news/newsUI}">
                            新闻列表
                        </a>
                    </li>
                    <li class="active">
                        <a th:href="@{/certs/certUI}">
                            证书列表
                        </a>
                    </li>
<!--                    <li>-->
<!--                        <a th:href="@{/uis/judgesUI}">-->
<!--                            评委列表-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a th:href="@{/uis/scoreOptionsUI}">-->
<!--                            评分选项-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>证书列表</p>
                    </div>
                    <div class="right_table">
<!--                        <form class="form-horizontal" id="myForm" th:action="@{/main}" method="post">-->
                            <div class="table_form search">
<!--                                <input type="button" th:if="${session.user.userRole == 1}" class="btn btn-success" id="add" value="添加管理用户" >-->
                                <input type="button" class="btn btn-info" id="add" th:value="添加">
                            </div>
<!--                            <div class="table_form search" th:if="${session.user.area == 0}">-->
<!--                                <input type="button" class="btn btn-primary" id="search" value="搜索" >-->
<!--                            </div>-->
                            <div class="table_form">
                                <table class="table" id="table">
                                </table>
                                <div id="page">
                                </div>
                            </div>
                        <textarea id="content1" style="display: none;"></textarea>
<!--                        </form>-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>

    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/jquery-validate.js"></script>

    <!--====== layerUI js ======-->
    <script src="/js/layui/layui.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript">
        function page_jump(pageNo){
            window.location.href = '/certs/pagination?&pageNo='+pageNo;
        }
        $(document).ready(function(){
            //页面数据渲染
            refreshTable();
            $('#search').click(function(){
                window.location.href = '/certs?areaSearch='+$('#areaSearch').val();
            })

            layui.use(['layer', 'layedit', 'jquery', 'form', 'upload', 'laydate'], function () {
                const layer = layui.layer;
                const layedit = layui.layedit;
                const form = layui.form;
                const upload = layui.upload;
                const laydate = layui.laydate;

                $('#add').click(function(){
                    layer.open({
                        type: 1,
                        title: '新增证书',
                        area: ['800px', '700px'],
                        maxmin: true,
                        content: '<div class="layui-form" style="padding:20px;">' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">大赛名称</label>' +
                            '           <div class="layui-input-block">' +
                            '               <input type="text" name="competition" id="competition" required  lay-verify="required" placeholder="请输入大赛名称" autocomplete="off" class="layui-input">' +
                            '           </div>' +
                            '       </div>' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">项目名称</label>' +
                            '           <div class="layui-input-block">' +
                            '               <input type="text" name="projectName" id="projectName" required  lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">' +
                            '           </div>' +
                            '       </div>' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">团队名称</label>' +
                            '           <div class="layui-input-block">' +
                            '               <input type="text" name="teamName" id="teamName" required  lay-verify="required" placeholder="请输入团队名称" autocomplete="off" class="layui-input">' +
                            '           </div>' +
                            '       </div>' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">团队成员</label>' +
                            '           <div class="layui-input-block">' +
                            '               <input type="text" name="names" id="names" required  lay-verify="required" placeholder="请输入团队成员（以逗号隔开）" autocomplete="off" class="layui-input">' +
                            '           </div>' +
                            '       </div>' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">奖项</label>' +
                            '           <div class="layui-input-block">' +
                            '               <input type="text" name="prize" id="prize" required  lay-verify="required" placeholder="请输入奖项" autocomplete="off" class="layui-input">' +
                            '           </div>' +
                            '       </div>' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">发证时间</label>' +
                            '           <div class="layui-input-block">' +
                            '               <input type="text" name="startTime" id="startTime" required  lay-verify="required" placeholder="请输入发证时间" autocomplete="off" class="layui-input">' +
                            '           </div>' +
                            '       </div>' +
                            '       <div class="layui-form-item">' +
                            '           <label class="layui-form-label">证书</label>' +
                            '           <div class="layui-input-block">' +
                            '               <button type="button" class="layui-btn" id="testUpload">上传证书</button>' +
                            '               <div id="imagePreview" style="display: none; margin-top: 10px;">' +
                            '                   <img src="" alt="上传的图片" id="previewImg" width="300">' +
                            '               </div>' +
                            '           </div>' +
                            '       </div>' +
                            '    <div id="imagePreview" style="display: none; margin-top: 10px;">\n' +
                            '      <img src="" alt="上传的图片" id="previewImg" width="300">\n' +
                            '    </div>' +
                            '</div>',
                        success: function (layero) {
                            //执行一个laydate实例
                            laydate.render({
                                elem: '#startTime' //指定元素
                            });
                            // 执行实例化
                            var uploadInst = upload.render({
                                elem: '#testUpload', // 绑定元素
                                url: '/uploadImage', // 上传接口地址，这里假设后端接口为 /upload
                                before: function (obj) {
                                    // 上传前的回调函数，可用于显示加载状态等
                                    layer.msg('图片上传中，请稍候...', { icon: 16, time: 0 });
                                },
                                done: function (res) {
                                    // 上传成功后的回调函数
                                    if (res.code === 0) { // 假设后端返回的成功状态码为0
                                        layer.msg('图片上传成功！', { icon: 1 });
                                        $('#imagePreview').show();
                                        $('#previewImg').attr('src', res.data.src); // res.data.url为后端返回的图片访问路径
                                    } else {
                                        layer.msg('图片上传失败：' + res.msg, { icon: 2 });
                                    }
                                    layer.closeAll('loading'); // 关闭加载提示框
                                },
                                error: function () {
                                    // 上传失败后的回调函数
                                    layer.msg('图片上传出错，请重试！', { icon: 2 });
                                    layer.closeAll('loading');
                                }
                            });
                        },
                        btn: ['保存', '取消'],
                        yes: function (index, layero) {
                            let imagesUrl = $('#previewImg').attr('src');
                            imagesUrl = imagesUrl.substring(imagesUrl.lastIndexOf('/') + 1);
                            const data = {
                                'competition': $('#competition').val(),
                                'projectName': $('#projectName').val(),
                                'teamName': $('#teamName').val(),
                                'names': $('#names').val(),
                                'prize': $('#prize').val(),
                                'startTime': $('#startTime').val(),
                                'images': imagesUrl
                            };
                            $.ajax({
                                url: '/certs',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(data),
                                success: function (result) {
                                    layer.close(index);
                                    refreshTable();
                                },
                                error: function (error) {
                                    layer.msg('保存失败：' + error.responseText);
                                }
                            });
                        },
                        cancel: function () {
                            layer.closeAll();
                        }
                    })
                })

            })
        })

        function update(id){
            $.ajax({
                url: '/certs/' + id,
                type: 'GET',
                success: function (result) {
                    layui.use(['layer', 'layedit', 'jquery', 'form', 'upload', 'laydate'], function () {
                        const layer = layui.layer;
                        const layedit = layui.layedit;
                        const form = layui.form;
                        const upload = layui.upload;
                        const laydate = layui.laydate;

                        layer.open({
                            type: 1,
                            title: '新增证书',
                            area: ['800px', '700px'],
                            maxmin: true,
                            content: '<div class="layui-form" style="padding:20px;">' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">大赛名称</label>' +
                                '           <div class="layui-input-block">' +
                                '               <input type="text" name="competition" id="competition" value="'+result.data.competition+'" required  lay-verify="required" placeholder="请输入大赛名称" autocomplete="off" class="layui-input">' +
                                '           </div>' +
                                '       </div>' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">项目名称</label>' +
                                '           <div class="layui-input-block">' +
                                '               <input type="text" name="projectName" id="projectName" value="'+result.data.projectName+'" required  lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">' +
                                '           </div>' +
                                '       </div>' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">团队名称</label>' +
                                '           <div class="layui-input-block">' +
                                '               <input type="text" name="teamName" id="teamName" value="'+result.data.teamName+'" required  lay-verify="required" placeholder="请输入团队名称" autocomplete="off" class="layui-input">' +
                                '           </div>' +
                                '       </div>' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">团队成员</label>' +
                                '           <div class="layui-input-block">' +
                                '               <input type="text" name="names" id="names" value="'+result.data.names+'" required  lay-verify="required" placeholder="请输入团队成员（以顿号隔开）" autocomplete="off" class="layui-input">' +
                                '           </div>' +
                                '       </div>' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">奖项</label>' +
                                '           <div class="layui-input-block">' +
                                '               <input type="text" name="prize" id="prize" value="'+result.data.prize+'" required  lay-verify="required" placeholder="请输入奖项" autocomplete="off" class="layui-input">' +
                                '           </div>' +
                                '       </div>' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">发证时间</label>' +
                                '           <div class="layui-input-block">' +
                                '               <input type="text" name="startTime" id="startTime" value="'+result.data.startTimeName+'" required  lay-verify="required" placeholder="请输入发证时间" autocomplete="off" class="layui-input">' +
                                '           </div>' +
                                '       </div>' +
                                '       <div class="layui-form-item">' +
                                '           <label class="layui-form-label">证书</label>' +
                                '           <div class="layui-input-block">' +
                                '               <button type="button" class="layui-btn" id="testUpload">上传证书</button>' +
                                '               <div id="imagePreview" style=" margin-top: 10px;">' +
                                '                   <img alt="上传的图片" id="previewImg" width="300" src="' + imagesUrl + result.data.images + '">' +
                                '               </div>' +
                                '           </div>' +
                                '       </div>' +
                                '    <div id="imagePreview" style="display: none; margin-top: 10px;">' +
                                '      <img alt="上传的图片" id="previewImg" width="300" src="' + imagesUrl + result.data.images + '">' +
                                '    </div>' +
                                '</div>',
                            success: function (layero) {
                                //执行一个laydate实例
                                laydate.render({
                                    elem: '#startTime' //指定元素
                                });
                                // 执行实例化
                                var uploadInst = upload.render({
                                    elem: '#testUpload', // 绑定元素
                                    url: '/uploadImage', // 上传接口地址，这里假设后端接口为 /upload
                                    before: function (obj) {
                                        // 上传前的回调函数，可用于显示加载状态等
                                        layer.msg('图片上传中，请稍候...', { icon: 16, time: 0 });
                                    },
                                    done: function (res) {
                                        // 上传成功后的回调函数
                                        if (res.code === 0) { // 假设后端返回的成功状态码为0
                                            layer.msg('图片上传成功！', { icon: 1 });
                                            $('#imagePreview').show();
                                            $('#previewImg').attr('src', res.data.src); // res.data.url为后端返回的图片访问路径
                                        } else {
                                            layer.msg('图片上传失败：' + res.msg, { icon: 2 });
                                        }
                                        layer.closeAll('loading'); // 关闭加载提示框
                                    },
                                    error: function () {
                                        // 上传失败后的回调函数
                                        layer.msg('图片上传出错，请重试！', { icon: 2 });
                                        layer.closeAll('loading');
                                    }
                                });
                            },
                            btn: ['保存', '取消'],
                            yes: function (index, layero) {
                                let imagesUrl = $('#previewImg').attr('src');
                                imagesUrl = imagesUrl.substring(imagesUrl.lastIndexOf('/') + 1);
                                const data = {
                                    'id': id,
                                    'competition': $('#competition').val(),
                                    'projectName': $('#projectName').val(),
                                    'teamName': $('#teamName').val(),
                                    'names': $('#names').val(),
                                    'prize': $('#prize').val(),
                                    'startTime': $('#startTime').val(),
                                    'images': imagesUrl
                                };
                                $.ajax({
                                    url: '/certs',
                                    type: 'PUT',
                                    contentType: 'application/json',
                                    data: JSON.stringify(data),
                                    success: function (result) {
                                        layer.close(index);
                                        refreshTable();
                                    },
                                    error: function (error) {
                                        layer.msg('保存失败：' + error.responseText);
                                    }
                                });
                            },
                            cancel: function () {
                                layer.closeAll();
                            }
                        })
                    })
                },
                error: function (error) {
                    layer.msg('保存失败：' + error.responseText);
                }
            });

        }

        function refreshTable(){
            $.ajax({
                url: '/certs/pagination',
                type: 'GET',
                success: function (data) {
                    // 清空表格内容
                    $('#table').empty();
                    // 根据获取到的数据重新构建表格内容
                    let tableHtml = '<thead><tr><th>大赛名称</th><th>项目名称</th><th>团队名称</th><th>团队成员</th><th>奖项</th><th>操作</th></tr></thead><tbody>';
                    data.data.records.forEach(function (info) {
                        tableHtml += '<tbody><tr><td>' + info.competition + '</td><td>' + info.projectName + '</td>' +
                            '<td>' + info.teamName + '</td>' +
                            '<td>' + info.names + '</td>' +
                            '<td>' + info.prize + '</td>' +
                            '<td><a href="#" onclick="update('+info.id+')">更改</a> | ' +
                            '<a href="#" onclick="del('+info.id+')">删除</a></td></tr>';
                    });
                    tableHtml += '</tbody>';
                    $('#table').html(tableHtml);

                    $('#page').empty();
                    let pageHtml = '';
                    if(data.data.current === 1){
                        pageHtml += '<span style="color: gray">首页 上一页</span>'
                    }else if(data.data.current >1){
                        pageHtml += '<span><a href="#" onclick="page_jump(1)">首页</a> <a href="#" onclick="page_jump(' + (data.data.current-1) + ')">上一页</a></span>';
                    }
                    pageHtml += '第<span>' + data.data.current + '</span>页，共<span>' + data.data.total + '</span>条';
                    let lastPage = (data.data.total/data.data.size)<=1?1:(data.data.total%data.data.size==0?(data.data.total/data.data.size):(data.data.total/data.data.size+1));
                    if(data.data.current === lastPage){
                        pageHtml += '<span style="color: gray">下一页 尾页</span>'
                    }else if(data.data.current < lastPage){
                        pageHtml += '<span><a  href="#" onclick="page_jump('+ data.data.current +')">下一页</a> ' +
                            '<a href="javascript:void(0)" onclick="page_jump('+ lastPage +')">尾页</a></span>';
                    }
                    $('#page').html(pageHtml);
                },
                error: function (error) {
                    layer.msg('获取数据失败：' + error.responseText);
                }
            });
        }
    </script>
</body>
</html>
